<template>
  <m-layout>
    <mt-header slot="header" title="查看点评" >
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body" class="comment">
      <m-section :border-bottom="false" class="box">
        <div class="uesrInfo">
          <img :src="userinfo.img || '/static/images/default/avatar.png'" alt="">
          <span class="name">{{userinfo.name}}</span>
          <!-- <m-flexbox>
            <e-avatar style="width: 60px;height: 60px"/>
            <m-flexbox-item>
              <h4 style="margin:0">深圳星空体育培训学校</h4>
              <small class="weak">担任职务：教练员</small>
            </m-flexbox-item>
          </m-flexbox> -->
        </div>
        <div class="cnt" v-html="info.content"></div>
        <div class="pic">
          <img v-for="(item,index) in info.fileList" :key="index" :src="item.filePath" alt="">
        </div>
      </m-section>
    </div>
    <div slot="bottom" class="actionBtn">
      <mt-button size="normal" pain @click="goNext">编辑</mt-button>
      <mt-button size="normal" pain @click="showMsg">删除</mt-button>
    </div>
  </m-layout>
</template>

<script>
import api from 'api/reviews'
import { MessageBox, Toast } from 'mint-ui'
export default {
  methods: {
    getComment () {
      api.getComment({
        commentId: this.commentId
      }).then((res) => {
        this.info = res.data
      }).catch(() => {})
    },
    goNext () {
      window.sessionStorage.setItem('commentInfo', JSON.stringify(this.info))
      this.$router.push({path: '/reviews/edit', query: {commentId: this.commentId}})
    },
    showMsg () {
      MessageBox({
        title: '确认删除该点评？',
        message: '删除后不可恢复',
        showCancelButton: true
      })
        .then((action) => {
          if (action === 'confirm') {
            this.delComment()
          }
        })
    },
    delComment () {
      api.delComment({
        commentId: this.commentId
      }).then((res) => {
        Toast({
          message: '删除成功！',
          duration: 1000
        })
        this.$router.go(-1)
      }).catch(() => {
      })
    }
  },
  data () {
    return {
      commentId: '',
      userinfo: {
        img: '',
        name: ''
      },
      info: {}
    }
  },
  mounted () {
    this.commentId = this.$route.query.commentId
    let student = window.sessionStorage.getItem('student')
    if (student) {
      let data = JSON.parse(student)
      this.userinfo.img = data.headPicture
      this.userinfo.name = data.name
    }
    this.getComment()
  }
}
</script>

<style lang="scss" scoped>
.comment{
  .box{
    padding: 0.2rem;
    .uesrInfo{
      img{
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 0.2rem;
      }
      .name{
        display: inline-block;
        line-height: 0.8rem;
        color: $color-sub;
      }
    }
    .cnt{
      padding: 0.3rem 0;
      line-height: 1.5;
    }
    .pic{
      overflow: hidden;
      img{
        width: 30%;
        height: 2rem;
        margin: 0 0.2rem 0.2rem 0;
        vertical-align: bottom;
        &:nth-child(3n+3){
          margin-right: 0;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.m-layout{
  .m-bottom{
    position: relative;
    .actionBtn{
      &:before{
        content: " ";
        border-top: 1px solid $border-color-base;
        display: block;
        height:0;
        width:100%;
        position: absolute;
        left: 0;
        top:0;
        transform: scaleY(0.5);
      }
      text-align: right;
      button{
        margin-left: 0.5rem;
        padding: 0 0.6rem;
      }
    }
  }
}
</style>
